<template>
    <div>
        <div class="today-inventory">今日医疗器材库存</div>
        <div id="todayEquipmentInventory"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { Liquid, measureTextWidth } from '@antv/g2plot';
onMounted(() => {
    const liquidPlot = new Liquid(document.getElementById('todayEquipmentInventory'), {
        percent: 0.6,
        radius: 0.8,
        autoFit: true,
        height: 300,
        statistic: {
            title: {
                // formatter: () => '盈利率',
                style: ({ percent }) => ({
                    fill: percent > 0.65 ? 'white' : 'rgba(44,53,66,0.85)',
                }),
            },
        },
        liquidStyle: ({ percent }) => {
            return {
                fill: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
                stroke: percent > 0.45 ? '#5B8FF9' : '#FAAD14',
            };
        },
        color: () => '#5B8FF9',
    });
    liquidPlot.render();
})
</script>

<style lang="scss" scoped>
.today-inventory{
    font-size: 20px;
    text-align: center;
    font-weight: 700;
}
</style>